<template>
  <div>
    
    <nav-com></nav-com>
    <el-container >
      <el-header>
         <keyword-select class="search"></keyword-select>
      </el-header>      
       <el-main>
          <el-row>
              <el-col :span="5" v-for="(item,index) in searchInfo" :key="index" >
                <el-card 
                  :body-style="{ padding: '11px',margin:'11px' }">  
                  <template>
                    <div @click="descBicy(item)">                    
                      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                      <div style="padding: 3px;">
                        <span>{{item.bicyclename}}</span>
                        <div class="bottom clearfix">
                          <div class="desc">{{item.platenumber}}</div>
                          <div class="grade">{{item.score}}分</div>                     
                        </div>
                        <div class="priceMounth">
                            {{item.price}}/月
                        </div>
                      </div>
                    </div>
                  </template>               
                  
                </el-card>
              </el-col>
            </el-row>
      </el-main> 
    </el-container>    
  </div>
</template>

<script>
import navCom from '@/components/Nav.vue'
import keywordSelect from '../Home/Select/keywordSelect.vue'


import {getBicycleInfo} from '@/networdk/user'

export default {
  name:'searchBicycle',
  components:{
    navCom,
    keywordSelect
  },
  data() {
    return {
      // bicycleInfo:[]
    }
  },
  created(){
    this.getInfo()
  },
  computed:{
    searchInfo(){
      return this.$store.state.searchInfo
    }
  },
  methods: {
    getInfo(){
      // getBicycleInfo().then(({data})=>{
      //   console.log('*********获取电动车信息');

      //   console.log(data);
      //   if(data.data.status === 200){
      //     this.bicycleInfo = data.data.result
      //     // this.bicycleInfo.forEach(item=>{
      //     //   console.log(item);
      //     //   this.bicycleInfo = item
      //     // })
      //     console.log(this.bicycleInfo);
          
      //   }
      // })
    },
    descBicy(a){
      
      console.log('进入车辆详情',a);
      this.$router.push({
        name:'desc',
        params:{
          price:a.price,
          brand:a.brand,
          platenumber:a.platenumber,
          score:a.score,
          type:a.type,
          bicyclename:a.bicyclename
        }
      })
      
      
    }
    
  },
}
</script>

<style scoped>


.search{
  width: 1000px;
  height: 80px;
  /* border: 1px solid red; */
  margin: auto ;
  text-align: center;
  margin-top: 30px;
  /* line-height: 80px; */
}
.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
    /* padding-right: 20px; */
  }
  .bottom .desc{
      float: left;
      font-size: 13px;
  }
  .bottom .grade{
    color: red;
    font-size: 10px;
    margin-left: 67px;
  }
  .priceMounth{
    margin-top: 30px;
    color: red;

  }
  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }


  
  
</style>